<template>
  <div>
    <van-nav-bar
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="back"
        @click-right="showEditModal"
    />

    <div class="info-card">
      <van-cell-group>
        <van-cell v-if="userLog">
          <template #title>
            <div style="text-align: left">
              <van-icon name="user-o" />
              <span>账户名称</span>
            </div>
          </template>
          {{ userLog.account }}
        </van-cell>
        <van-cell v-if="userLog">
          <template #title>
            <div style="text-align: left">
              <van-icon name="phone-o" />
              <span>手机号码</span>
            </div>
          </template>
          {{ userLog.phone }}
        </van-cell>
        <van-cell v-if="userLog">
          <template #title>
            <div style="text-align: left">
              <van-icon name="clock-o" />
              <span>注册时间</span>
            </div>

          </template>
          {{ userLog.ctime }}
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 编辑手机号弹窗 -->
    <van-dialog
        v-model:show="showEditDialog"
        title="编辑手机号"
        :show-cancel-button="false"
        confirm-button-text="确认"
        @confirm="updatePhoneNumber"
    >
      <van-field
          v-model="newPhoneNumber"
          label="手机号码"
          placeholder="请输入新手机号"
          input-align="center"
          clearable
          readonly
      />
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get, post } from '../util/request'; // 假设封装的请求方法

const userLog = ref(null);
const newPhoneNumber = ref('');
const showEditDialog = ref(false);

const back = () => {
  history.back();
}

// 在组件加载时获取用户信息
onMounted(() => {
  fetchUserInfo();
});

const fetchUserInfo = () => {
  // 发送请求获取用户信息
  get('/user/info').then(response => {
    if (response.code === 0) {
      userLog.value = response.data; // 假设后端返回的数据结构中有一个 data 字段包含用户信息
    } else {
      console.error('获取用户信息失败:', response.message);
    }
  }).catch(error => {
    console.error('获取用户信息失败:', error);
  });
};

const showEditModal = () => {
  showEditDialog.value = true;
  // 初始化编辑手机号的数据
  newPhoneNumber.value = userLog.value.phone;
};

const updatePhoneNumber = () => {
  // 发送请求更新手机号码
  const newData = { phone: newPhoneNumber.value }; // 要更新的手机号数据
  post('/user/updatePhone', newData).then(response => {
    if (response.code === 0) {
      // 更新成功
      userLog.value.phone = newPhoneNumber.value;
      showEditDialog.value = false; // 关闭弹窗
    } else {
      console.error('更新手机号失败:', response.message);
    }
  }).catch(error => {
    console.error('更新手机号失败:', error);
  });
};
</script>

<style scoped>
.info-card {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.van-cell {
  border: none; /* 移除默认边框 */
  padding: 10px 0; /* 调整内边距 */
}

.van-icon {
  font-size: 20px;
  margin-right: 8px;
  color: #1989fa; /* 图标颜色 */
}

.van-cell__title span {
  font-weight: bold; /* 加粗标题 */
}
</style>
